<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '新增角色' : '编辑角色'" append-to-body width="500px">

        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="form.roleName" style="width: 355px;" placeholder="请输入角色名称"  maxlength="15" clearable/>
            </el-form-item>
            
            <el-form-item label="角色标识" prop="roleSign">
                <el-input v-model="form.roleSign" style="width: 355px;" placeholder="请输入角色标识"  maxlength="15" clearable/>
            </el-form-item>

            <el-form-item label="角色类型" prop="type">
                <el-radio v-model="form.type" :label="0">区域角色</el-radio>
                <el-radio v-model="form.type" :label="1">老师角色</el-radio>
                <el-radio v-model="form.type" :label="2">学生角色</el-radio>
            </el-form-item>

            <el-form-item label="描述信息">
                <div style="margin: 20px 0;"></div>
                <el-input v-model="form.description" style="width: 355px;" rows="4" type="textarea" maxlength="50"   show-word-limit clearable/>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {roleAdd} from '@/api/request'
import { validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        
    },
    data() {
        return {
          loading: false, dialog: false, permissions: [],
          form: { roleName: '', roleSign: '', isFixed:"1", type: 0,description:'' },
          rules: {
            roleName: [
                { required: true, message: '请输入角色名称', trigger: 'blur' },
                {validator:validateEmpty,trigger: 'blur',}
            ],
            roleSign: [
                { required: true, message: '请输入角色标识', trigger: 'blur' },
                {validator:validateEmpty,trigger: 'blur',}
            ],

          }
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                    if (valid){
                        this.form.roleName = this.form.roleName.trim()
                        this.form.roleSign = this.form.roleSign.trim()
                        roleAdd(this.form).then(res => { 
                            this.$notify({
                                title: '保存成功',
                                type: 'success',
                                duration: 2500
                            })
                            this.dialog = false
                            this.$parent.init()
                        })
                    }else {
                        return false
                    }
                    
            })
            
        }, 600),
    }
}
</script>

<style scoped>

</style>
